<!-- // 绘制业务流程 -->
<template>
  <div class="hiss-container-box">
    <el-container>
      <el-header class="hiss-header" style="padding-top: 9px">
        <el-button-group style="line-height: 50px; float: left">
          <el-tooltip content="保存" placement="bottom" effect="light">
            <el-button size="small" @click="handleSaveShow">
              <Save color="#ababab" :size="18" />
            </el-button>
          </el-tooltip>
          <el-tooltip
            content="下载BPMN Xml文件"
            placement="bottom"
            effect="light"
          >
            <el-button size="small" @click="handleDownloadXml">
              <Download size="18" color="#ababab"></Download>
            </el-button>
          </el-tooltip>
          <el-tooltip content="下载流程图" placement="bottom" effect="light">
            <el-button size="small" @click="handleDownloadPic">
              <Image size="18" color="#ababab"></Image>
            </el-button>
          </el-tooltip>
        </el-button-group>
        <el-button-group
          style="line-height: 50px; float: left; margin: 0px 0px 0px 15px"
        >
          <el-tooltip content="撤销" placement="bottom" effect="light">
            <el-button size="small" @click="handleUndo">
              <Undo2 color="#ababab" :size="18" />
            </el-button>
          </el-tooltip>
          <el-tooltip content="恢复" placement="bottom" effect="light">
            <el-button size="small" @click="handleRedo">
              <Redo2Icon size="18" color="#ababab"></Redo2Icon>
            </el-button>
          </el-tooltip>
          <el-tooltip content="清空设计" placement="bottom" effect="light">
            <el-button size="small" @click="clearAll">
              <Eraser size="18" color="#ababab"></Eraser>
            </el-button>
          </el-tooltip>
        </el-button-group>
        <el-button-group
          style="line-height: 50px; float: left; margin: 0px 0px 0px 15px"
        >
          <el-tooltip content="左对齐" placement="bottom" effect="light">
            <el-button size="small" @click="handleAlign('left')">
              <AlignStartVertical color="#ababab" :size="18" />
            </el-button>
          </el-tooltip>
          <el-tooltip content="水平居中" placement="bottom" effect="light">
            <el-button size="small" @click="handleAlign('center')">
              <AlignCenterVertical color="#ababab" :size="18" />
            </el-button>
          </el-tooltip>
          <el-tooltip content="右对齐" placement="bottom" effect="light">
            <el-button size="small" @click="handleAlign('right')">
              <AlignEndVertical color="#ababab" :size="18" />
            </el-button>
          </el-tooltip>
          <el-tooltip content="上对齐" placement="bottom" effect="light">
            <el-button size="small" @click="handleAlign('top')">
              <AlignStartHorizontal color="#ababab" :size="18" />
            </el-button>
          </el-tooltip>
          <el-tooltip content="垂直居中" placement="bottom" effect="light">
            <el-button size="small" @click="handleAlign('middle')">
              <AlignCenterHorizontal color="#ababab" :size="18" />
            </el-button>
          </el-tooltip>
          <el-tooltip content="下对齐" placement="bottom" effect="light">
            <el-button size="small" @click="handleAlign('bottom')">
              <AlignEndHorizontal color="#ababab" :size="18" />
            </el-button>
          </el-tooltip>
        </el-button-group>
        <el-button-group
          style="line-height: 50px; float: left; margin: 0px 15px"
        >
          <el-tooltip content="缩小布局" placement="bottom" effect="light">
            <el-button size="small" @click="handleZoomOut">
              <el-icon size="18" color="#ababab"><ZoomOut /></el-icon>
            </el-button>
          </el-tooltip>
          <el-tooltip content="自适应布局" placement="bottom" effect="light">
            <el-button size="small" @click="handleZoom0">
              {{ zoom + "%" }}
            </el-button>
          </el-tooltip>
          <el-tooltip content="放大布局" placement="bottom" effect="light">
            <el-button size="small" @click="handleZoomIn">
              <el-icon size="18" color="#ababab"><ZoomIn /></el-icon>
            </el-button>
          </el-tooltip>
        </el-button-group>
        <el-button-group
          style="line-height: 50px; float: left; margin: 0px 15px 0px 0px"
        >
          <el-tooltip content="启动流程" placement="bottom" effect="light">
            <el-button size="small" @click="handlerStartFlowShow">
              <el-icon size="18" color="#dc0118"><Clock12 /></el-icon>
            </el-button>
          </el-tooltip>
          <el-tooltip
            content="转换成开发者模式"
            placement="bottom"
            effect="light"
          >
            <el-button size="small" @click="handlerToDevFlow">
              <el-icon size="18" color="#aca118"><Construction /></el-icon>
            </el-button>
          </el-tooltip>
          <el-tooltip content="办理流程" placement="bottom" effect="light">
            <el-button size="small" @click="handlerAuthFlow">
              <el-icon size="18" color="#1c81f8"><Stamp /></el-icon>
            </el-button>
          </el-tooltip>
        </el-button-group>
        <el-button-group
          style="line-height: 50px; float: left; margin: 0px 15px 0px 0px"
        >
          <el-tooltip content="部署设计" placement="bottom" effect="light">
            <el-button size="small" @click="handlerDeployment">
              <el-icon size="18" color="#dc0118"><EggFried /></el-icon>
            </el-button>
          </el-tooltip>
          <el-tooltip content="启动预备流程" placement="bottom" effect="light">
            <el-button size="small" @click="handlerStartPreFlowShow">
              <el-icon size="18" color="#dc0118"><Trello /></el-icon>
            </el-button>
          </el-tooltip>
        </el-button-group>
        <el-button-group style="float: left; margin: 0px 15px 0px 0px">
          <el-switch
            v-model="designDir"
            inline-prompt
            @change="handleDir"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
              margin-top: -4px;
            "
            active-text="竖版"
            inactive-text="横版"
          />
        </el-button-group>
        <el-switch
          v-model="designViewer"
          inline-prompt
          @change="handleViewXml"
          style="
            float: right;
            margin-left: 15px;
            --el-switch-on-color: #13ce66;
            --el-switch-off-color: #ff4949;
            margin-top: -4px;
          "
          active-text="设计模式"
          inactive-text="源码模式"
        />
      </el-header>
      <el-main class="hiss-main">
        <div
          :class="{ show: designViewer, hide: !designViewer, designBody: true }"
        >
          <div id="container" class="hiss-container"></div>
          <div id="properties"></div>
        </div>
        <div
          :class="{
            hide: designViewer,
            show: !designViewer,
            'hiss-code-body': true,
          }"
        >
          <highlightjs
            language="xml"
            :code="codeXml"
            style="white-space: pre-wrap; padding: 0px; margin: 0px"
            contenteditable="false"
          ></highlightjs>
        </div>
      </el-main>
    </el-container>
  </div>
  <StarterConfig
    ref="starter"
    :tenant="tenant"
    :id="selectElement.id"
    :config="config"
  />
  <ConditionConfig ref="condition" :id="selectElement.id" :config="config" />
  <SingleApproveConfig
    ref="singleApprove"
    :tenant="tenant"
    :id="selectElement.id"
    attr="singleApprove"
    :config="config"
  />
  <SingleApproveConfig
    ref="multipleApprove"
    :tenant="tenant"
    :id="selectElement.id"
    attr="multipleApprove"
    :single="false"
    :config="config"
  />
  <CCConfig
    ref="notifier"
    attr="notifier"
    :tenant="tenant"
    :id="selectElement.id"
    :cc="false"
    :config="config"
  />
  <CCConfig
    ref="cc"
    attr="cc"
    :tenant="tenant"
    :id="selectElement.id"
    :config="config"
  />
  <OperateDialog
    buttonName="发起流程"
    ref="start"
    field-label=""
    field-name=""
    :fun="handlerStartFlow"
  ></OperateDialog>
  <OperateDialog
    buttonName="发起预备流程"
    ref="startPre"
    field-label=""
    field-name=""
    :fun="handlerStartPreFlow"
  ></OperateDialog>
  <el-dialog v-model="dialogFormVisible" title="保存设计流程">
    <el-form :model="formData" :rules="formDataRules" ref="formDataRef">
      <el-form-item label="名称" prop="name" :label-width="80">
        <el-input v-model="formData.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="描述" prop="description" :label-width="80">
        <el-input v-model="formData.description" autocomplete="off" />
      </el-form-item>
      <el-form-item label="图标" prop="icon" :label-width="80">
        <el-radio-group v-model="formData.icon">
          <el-radio v-for="(item, index) in icons" :key="index" :label="item">
            <img :src="item" />
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave"
          ><Save color="#fff" :size="18" />保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import {
  AlignCenterHorizontal,
  AlignCenterVertical,
  AlignEndHorizontal,
  AlignEndVertical,
  AlignStartHorizontal,
  AlignStartVertical,
  Clock12,
  EggFried,
  Trello,
  Construction,
  Download,
  Eraser,
  Image,
  Redo2Icon,
  Save,
  Undo2,
} from "lucide-vue-next";
import BpmnModeler from "bpmn-js/lib/Modeler";
// 导入汉化包
import customTranslate from "@/components/customTranslate/customTranslate";
import businessModdleDescriptor from "@/components/business/descriptors/activiti.json";
// 自定义palette
import customBisPaletteControlsModule from "@/components/palette/bis";
// 自定义render
import customBisDesignRenderModule from "@/components/render/BisDesign";
// 自定义render
import customElementFactoryModule from "@/components/factory";
import customAutoPlaceModule from "@/components/layout";
import {
  getBisDesign,
  modelDeploment,
  saveBisDesign,
  startBisDesign,
  startPreProcessDesign,
  startToDevDesign,
} from "@/api/BusinessForDesignApi";
import { getBusinessObject, is } from "bpmn-js/lib/util/ModelUtil";
// 自定义组件
import StarterConfig from "./components/StarterConfig";
import ConditionConfig from "./components/ConditionConfig";
import SingleApproveConfig from "./components/SingleApproveConfig";
import OperateDialog from "./components/OperateDialog";
import CCConfig from "./components/CCConfig";
import { PROCESS_ICONS } from "@/constants";

export default {
  name: "DesignBis",
  components: {
    Construction,
    EggFried,
    Trello,
    OperateDialog,
    CCConfig,
    StarterConfig,
    ConditionConfig,
    SingleApproveConfig,
    Undo2,
    Clock12,
    Redo2Icon,
    Download,
    Image,
    Eraser,
    Save,
    AlignStartVertical,
    AlignCenterVertical,
    AlignEndVertical,
    AlignStartHorizontal,
    AlignCenterHorizontal,
    AlignEndHorizontal,
  },
  data() {
    return {
      designDir: false,
      tempTenantId: "",
      // 集成模式初始化的id
      initModelId: "",
      // 每个节点的配置
      config: {
        // 每个节点的配置
        nodeConfig: {},
        // 全局表单配置
        forms: [],
      },
      selectElement: {
        id: "",
        element: null,
        bpmnModeler: null,
        businessObject: null,
      },
      icons: PROCESS_ICONS,
      test: true,
      zoom: 100,
      codeXml: "",
      designViewer: true,
      containerEl: null,
      propertiesEl: null,
      bpmnModeler: null,
      fileList: [],
      dialogFormVisible: false,
      formData: {
        icon: "",
        name: "",
        category: "",
        modelId: "",
        key: "",
        content: "",
        description: "",
      },
      // 设计页面的办理按钮跳转页面配置
      configUrl: {
        dev: "/#/dev/:id",
        viewerBis: "/#/viewer-bis/:id",
        handleBis: "/#/handler-bis/:id",
      },
      formDataRules: {
        name: [
          {
            required: true,
            message: "名称是必填的",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    window["hiss_bis_dir"] = this.designDir;
    window["bisConfig"] = this.getConfig;
    window.document.title = "业务人员流程设计器";
    this.containerEl = document.getElementById("container");
    // 添加翻译组件
    var customTranslateModule = {
      translate: ["value", customTranslate],
    };
    this.bpmnModeler = new BpmnModeler({
      container: this.containerEl,
      propertiesPanel: {
        parent: this.propertiesEl,
      },
      additionalModules: [
        customTranslateModule,
        customAutoPlaceModule,
        customBisPaletteControlsModule,
        customElementFactoryModule,
        customBisDesignRenderModule,
      ],
      moddleExtensions: {
        activiti: businessModdleDescriptor,
      },
    });
    // 监听事件
    let eventBus = this.bpmnModeler.get("eventBus");
    eventBus.on("element.contextmenu", (e) => {
      e.preventDefault();
      if (is(e.element, "bpmn:UserTask")) {
        let businessObject = getBusinessObject(e.element);
        let hissType = businessObject.get("hissType");
        e.element.translate = this.bpmnModeler.get("translate");
        if ("starter" == hissType) {
          this.$refs.starter.show(this.bpmnModeler, businessObject, e.element);
        }
        if ("condition" == hissType) {
          this.$refs.condition.show(
            this.bpmnModeler,
            businessObject,
            e.element
          );
        }
        if ("singleApprove" == hissType) {
          this.$refs.singleApprove.show(
            this.bpmnModeler,
            businessObject,
            e.element
          );
        }
        if ("multipleApprove" == hissType) {
          this.$refs.multipleApprove.show(
            this.bpmnModeler,
            businessObject,
            e.element
          );
        }
        if ("cc" == hissType) {
          this.$refs.cc.show(this.bpmnModeler, businessObject, e.element);
        }
        if ("notifier" == hissType) {
          this.$refs.notifier.show(this.bpmnModeler, businessObject, e.element);
        }
        this.selectElement.id = e.element.id;
      }
    });
    let meta = this.$route.meta || {};
    this.tempTenantId = meta.tenant || "";
    this.initModelId = meta.id || "";
    if (meta.configUrl) {
      this.configUrl = meta.configUrl;
    }
    this.initData();
  },
  computed: {
    modelId() {
      return this.initModelId || this.$route.params.id;
    },
    category() {
      return this.$route.query.category;
    },
    tenant() {
      return this.tempTenantId || this.$route.query.tenant;
    },
    name() {
      return this.$route.query.name;
    },
  },
  watch: {
    "formData.name": function (newVal, oldVal) {
      if (newVal) {
        window.document.title = newVal;
      }
    },
  },
  methods: {
    handleDir() {
      window["hiss_bis_dir"] = this.designDir;
    },
    // 部署一个流程
    handlerDeployment() {
      var parms = { ...this.formData, _tenant: this.tenant };
      modelDeploment(parms).then((res) => {
        if (res.success) {
          if (res.data.deployId) {
            this.$notify.success({
              title: "提示",
              message: "部署成功",
              showClose: false,
            });
          }
        } else {
          let temp = res.errorMessage;
          let msg = temp;
          try {
            msg = eval("(" + temp + ")");
            msg = msg.msg || temp;
          } catch (e) {}
          this.$notify.error({
            title: "提示",
            message: msg,
            showClose: false,
          });
        }
      });
    },
    // 启动预备流程
    handlerStartPreFlowShow() {
      if (this.formData.modelId) {
        this.$refs.startPre.show();
      } else {
        this.$notify.warning({
          title: "提示",
          message: "请先保存当前设计后重试",
          showClose: false,
        });
      }
    },
    handlerStartPreFlow(data, messageAuth) {
      var parms = { ...this.formData, ...data, _tenant: this.tenant };
      return startPreProcessDesign(parms, messageAuth).then((res) => {
        if (res.success) {
          this.preProcessInstanceId = res.data.preProcessInstanceId;
          if (res.data.preProcessInstanceId) {
            let url = this.configUrl.handleBis;
            url = url.replace(":id", res.data.preProcessInstanceId);
            window.open(url, "_blank");
          }
        }
        return res;
      });
    },
    // 启动流程
    handlerStartFlowShow() {
      if (this.formData.modelId) {
        this.$refs.start.show();
      } else {
        this.$notify.warning({
          title: "提示",
          message: "请先保存当前设计后重试",
          showClose: false,
        });
      }
    },
    handlerStartFlow(data, messageAuth) {
      var parms = { ...this.formData, ...data, _tenant: this.tenant };
      return startBisDesign(parms, messageAuth).then((res) => {
        if (res.success) {
          this.processInstanceId = res.data.processInstanceId;
        }
        return res;
      });
    },
    handlerAuthFlow() {
      if (this.processInstanceId) {
        let url = this.configUrl.handleBis;
        url = url.replace(":id", this.processInstanceId);
        window.open(url, "_blank");
      } else {
        this.$notify.warning({
          title: "提示",
          message: "你没有在当前页面中启动成功过流程，请先启动流程~",
          showClose: false,
        });
      }
    },
    handlerToDevFlow() {
      if (this.formData.modelId) {
        var parms = { ...this.formData, _tenant: this.tenant };
        startToDevDesign(parms).then((res) => {
          if (res.data.modelId) {
            let url = this.configUrl.dev;
            url = url.replace(":id", res.data.modelId);
            window.open(url, "_blank");
          }
          if (res.data.msg) {
            this.$notify.warning({
              title: "提示",
              message: res.data.msg,
              showClose: false,
            });
          }
        });
      } else {
        this.$notify.warning({
          title: "提示",
          message: "请先保存当前设计后重试",
          showClose: false,
        });
      }
    },
    getConfig() {
      return this.config;
    },
    async initData() {
      let temp = true;
      if (this.modelId) {
        let _this = this;
        window["translate"] = this.bpmnModeler.get("translate");
        await getBisDesign({
          modelId: this.modelId,
          _tenant: this.tenant,
        }).then((res) => {
          this.formData = res.data.model;
          if (res.data.model.content) {
            _this.setContent(res.data.model.content);
            _this.config = JSON.parse(res.data.model.configJson);
            temp = false;
          } else {
            this.$notify.warning({
              title: "提示",
              message: "未找到对应的流程文件，为你新建了一个，开始设计吧~",
              showClose: false,
            });
          }
        });
      }
      if (temp) {
        this.initXml();
      }
    },
    initXml() {
      var initialDiagram =
        '<?xml version="1.0" encoding="UTF-8" standalone="yes"?> ' +
        '<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" ' +
        'xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" ' +
        'xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" ' +
        'xmlns:di="http://www.omg.org/spec/DD/20100524/DI" ' +
        'xmlns:tns="http://www.activiti.org/testm1685269119653" ' +
        'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ' +
        'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
        'expressionLanguage="http://www.w3.org/1999/XPath" id="hiss_flow_' +
        new Date().getTime() +
        '" name="" ' +
        'targetNamespace="http://www.activiti.org/testm1685269119653" typeLanguage="http://www.w3.org/2001/XMLSchema">' +
        '<process id="hiss_process_' +
        new Date().getTime() +
        '" name="hiss_process" isExecutable="true">' +
        '    <bpmn:userTask id="Activity_158gpps" hissType="starter" hissTypeName="发起人" hissColor="#509eff" />\n' +
        "</process>\n" +
        '  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
        '    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
        '      <bpmndi:BPMNShape id="Activity_158gpps_di" bpmnElement="Activity_158gpps">\n' +
        '        <dc:Bounds x="200" y="80" width="200" height="80" />\n' +
        "      </bpmndi:BPMNShape>\n" +
        "    </bpmndi:BPMNPlane>\n" +
        "  </bpmndi:BPMNDiagram>\n" +
        "</definitions>";
      this.setContent(initialDiagram);
    },
    async setContent(xml) {
      await this.bpmnModeler.importXML(xml);
      const canvasTemp = this.bpmnModeler.get("canvas");
      canvasTemp.zoom("fit-viewport");
      this.updateProcessId();
    },
    updateProcessId() {
      let rootElement;
      let id = "hiss_process_12_" + new Date().getTime();
      let elementRegistry = this.bpmnModeler.get("elementRegistry");
      let elements = elementRegistry._elements;
      for (let key in elements) {
        let element = elements[key].element;
        if (is(element, "bpmn:Process")) {
          rootElement = element;
          break;
        }
      }
      const modeling = this.bpmnModeler.get("modeling");
      modeling.updateProperties(rootElement, {
        id: id,
      });
    },
    handleSaveShow() {
      this.dialogFormVisible = true;
    },
    async handleSave() {
      const result = await this.bpmnModeler.saveXML({ format: true });
      const { xml } = result;
      this.formData.content = xml;
      this.formData.configJson = JSON.stringify(this.config);
      this.formData.category = this.category || this.formData.category;
      this.formData._tenant = this.tenant;
      if (!this.formData.category || !this.formData._tenant) {
        this.$notify.error({
          title: "提示",
          message: "分类和应用ID不能为空",
          showClose: false,
        });
        return;
      }
      saveBisDesign(this.formData)
        .then((res) => {
          if (res.success) {
            if (res.data.modelId) {
              this.formData.modelId = res.data.modelId;
              this.dialogFormVisible = false;
              this.$notify.success({
                title: "提示",
                message: "保存成功",
                showClose: false,
              });
            }
            if (res.data.msg) {
              this.$notify.error({
                title: "提示",
                message: res.data.msg,
                showClose: false,
              });
            }
          } else {
            let temp = res.errorMessage;
            let msg = temp;
            try {
              msg = eval("(" + temp + ")");
              msg = msg.msg || temp;
            } catch (e) {}
            this.$notify.error({
              title: "提示",
              message: msg,
              showClose: false,
            });
          }
        })
        .catch((res) => {
          this.$notify.error({
            title: "提示",
            message: "保存失败：" + res.errorMessage,
            showClose: false,
          });
        });
    },
    handleRemove(file) {
      for (let i = 0; i < this.fileList.length; i++) {
        if (file.name === this.fileList[i].name) {
          this.fileList.splice(i, 1);
        }
      }
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 后退
    handleUndo() {
      this.bpmnModeler.get("commandStack").undo();
    },
    // 前进
    handleRedo() {
      this.bpmnModeler.get("commandStack").redo();
    },
    handleDownloadXml() {
      this.bpmnModeler.saveXML({ format: true }, (err, data) => {
        const dataTrack = "bpmn";
        const a = document.createElement("a");
        const name = `diagram.${dataTrack}`;
        a.setAttribute(
          "href",
          `data:application/bpmn20-xml;charset=UTF-8,${encodeURIComponent(
            data
          )}`
        );
        a.setAttribute("target", "_blank");
        a.setAttribute("dataTrack", `diagram:download-${dataTrack}`);
        a.setAttribute("download", name);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      });
    },
    handleViewXml() {
      if (!this.designViewer) {
        var _this = this;
        this.bpmnModeler.saveXML({ format: true }, (err, data) => {
          _this.codeXml = data;
        });
      }
    },
    handleDownloadPic() {
      this.bpmnModeler.saveSVG({ format: true }, (err, data) => {
        const dataTrack = "svg";
        const a = document.createElement("a");
        const name = `diagram.${dataTrack}`;
        a.setAttribute(
          "href",
          `data:application/bpmn20-xml;charset=UTF-8,${encodeURIComponent(
            data
          )}`
        );
        a.setAttribute("target", "_blank");
        a.setAttribute("dataTrack", `diagram:download-${dataTrack}`);
        a.setAttribute("download", name);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      });
    },
    handleZoom0() {
      this.zoom = this.bpmnModeler.get("canvas").zoom("fit-viewport") * 100;
    },
    handleZoomOut() {
      this.zoom = this.zoom - 10;
      if (this.zoom < 10) {
        this.zoom = 10;
      }
      this.bpmnModeler.get("canvas").zoom(this.zoom / 100);
    },
    handleZoomIn() {
      this.zoom = this.zoom + 10;
      this.bpmnModeler.get("canvas").zoom(this.zoom / 100);
    },
    handleAlign(pos) {
      var modeling = this.bpmnModeler.get("modeling");
      var selection = this.bpmnModeler.get("selection");
      var align = this.bpmnModeler.get("alignElements");

      if (!align) return this.$message.error("当前模式不支持自动对齐");
      if (modeling && selection) {
        const e = selection.get();
        if (!e || e.length <= 1)
          return this.$message.warning(
            "请按住 Shift 键选择多个元素之后，再对齐"
          );
        align.trigger(e, pos);
      }
    },
    clearAll() {
      var commandStack = this.bpmnModeler.get("commandStack");
      if (commandStack) {
        commandStack.clear();
        this.initXml();
      }
    },
  },
};
</script>
<style>
@import "@/css/base.css";
.hide {
  display: none;
}
.show {
  display: block;
}
.hiss-header {
  border: none;
  background-color: #fefefe;
  height: 42px;
}
.hiss-code-body {
  border-top: 1px solid #dfdfdf;
  height: calc(100vh - 55px);
  text-align: left;
  background-color: #f6f6f6;
}
.hiss-container-box {
  height: 100vh;
  width: 100%;
  position: relative;
}
.hiss-main {
  padding: 0px;
  margin: 0px;
}
.hiss-container {
  border-top: 1px solid #dfdfdf;
  width: 100%;
  height: calc(100vh - 55px);
  float: left;
}
.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
  fill: green !important; /* color elements as green */
  background-color: red;
}
.bpmn-icon-task.red {
  color: #cc0000 !important;
}
.djs-shape g {
  border: 1px solid red;
  fill: #cc0000;
}
.hiss-task-p-starter:before {
  content: "\00a0\00a0\00a0";
  padding: 0px 2px;
  background: url("")
    no-repeat center center;
  background-size: 22px 22px;
}
.hiss-task-starter {
  width: 36px;
  height: 36px;
  background: url("")
    no-repeat center center;
  background-size: 36px 36px;
}
.hiss-task-p-single:before {
  content: "\00a0\00a0\00a0";
  padding: 0px 2px;
  background: url("")
    no-repeat center center;
  background-size: 22px 22px;
}
.hiss-task-singleApprove {
  width: 36px;
  height: 36px;
  background: url("")
    no-repeat center center;
  background-size: 36px 36px;
}
.hiss-task-p-multiple:before {
  content: "\00a0\00a0\00a0";
  padding: 0px 2px;
  background: url("")
    no-repeat center center;
  background-size: 22px 22px;
}
.hiss-task-multipleApprove {
  width: 36px;
  height: 36px;
  background: url("")
    no-repeat center center;
  background-size: 36px 36px;
}
.hiss-task-p-notifier:before {
  content: "\00a0\00a0\00a0";
  padding: 0px 2px;
  background: url("")
    no-repeat center center;
  background-size: 22px 22px;
}
.hiss-task-notifier {
  width: 36px;
  height: 36px;
  background: url("")
    no-repeat center center;
  background-size: 36px 36px;
}
.hiss-task-p-cc:before {
  content: "\00a0\00a0\00a0";
  padding: 0px 2px;
  background: url("")
    no-repeat center center fixed;
  background-size: 22px 22px;
}
.hiss-task-cc {
  width: 36px;
  height: 36px;
  background: url("")
    no-repeat center center;
  background-size: 36px 36px;
}
.hiss-task-p-condition:before {
  content: "\00a0\00a0\00a0";
  padding: 0px 2px;
  background: url("")
    no-repeat center center;
  background-size: 22px 22px;
}
.hiss-task-condition {
  width: 36px;
  height: 36px;
  background: url("")
    no-repeat center center;
  background-size: 36px 36px;
}
.bjs-powered-by {
  display: none;
}
</style>
